/**
 * Created by Dalyn on 2017/3/30.
 */
import React from 'react';
import { Button, Modal, Input, message } from 'antd';
import { Link } from 'react-router';
import '../css/SuggestList.css';
import Relay from "react-relay";
import Util from "../../../../util/Util";
import SuggestDetailMutation from "../mutation/SuggestDetailMutation";
import ReplySuggestMutation from "../mutation/ReplySuggestMutation"

export default class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      suggestDetailData: '',
      replyDetail: '', //回复详情内容
      reply_suggestId : '',// 回复时需要传的参数
      reply_userName : '', // 回复时需要传的参数
      reply_phone : '',    // 回复时需要传的参数
      reply_label : '',    // 0 普通  1 客服
    }

  }
  componentDidMount() {
    this.renderSuggestDetail()
  }
  renderSuggestDetail() {
    let suggestId = this.props.location.query.suggestId
    Relay.Store.commitUpdate(
        new SuggestDetailMutation({
          suggestId: suggestId,
          label: '0'
        }),
        {
            onFailure: () => {
              message.info('请求失败')
            },
            onSuccess: (response) => {
              let errorCode = response.getReplyList.getReplyList.errorCode
              if (errorCode == '0') {
                let suggestDetailData = response.getReplyList.getReplyList.replyModelList
                let suggestDetailData1 = response.getReplyList.getReplyList.replyModelList[0]
                if (suggestDetailData) {
                  this.setState({
                    suggestDetailData: suggestDetailData
                  })
                }
                if (suggestDetailData1) {
                  this.setState({
                    reply_suggestId : suggestDetailData1.suggestId,// 回复时需要传的参数
                    reply_userName : suggestDetailData1.userName, // 回复时需要传的参数
                    reply_phone : suggestDetailData1.phone,    // 回复时需要传的参数
                    reply_label : suggestDetailData1.label,
                  })
                }
              } else {
                message.info('请求失败')
              }
            }
        }
    );
  }
  //监听回复框的变化
  replyDetailChange = (e) => {
    if(e.target.value.length>500) {
      let replyDetail = e.target.value.substring(0, 500)
      this.setState({ replyDetail: replyDetail})
    } else {
      let replyDetail = e.target.value
      this.setState({ replyDetail: replyDetail})
    }
  }
  // 确定按钮点击
  confirmReplyClick = () => {
    /*确定回复按钮*/
    if (this.state.replyDetail != '' && this.state.replyDetail.length < 501) {
      Relay.Store.commitUpdate(
          new ReplySuggestMutation({
            suggestId: this.state.reply_suggestId,
            userName: this.state.reply_userName,
            phone: this.state.reply_phone,
            detail: this.state.replyDetail,
            label: this.state.reply_label,
          }),
          {
              onFailure: () => {
                // console.log("新增回复请求失败")
              },
              onSuccess: (response) => {
                let errorCode = response.saveReply.saveReply.errorCode
                if (errorCode == 0) {
                  this.renderSuggestDetail()
                  this.setState({
                    replyDetail: ''
                  })
                } else {
                  // console.log('回复失败');
                }
              }
          }
      );
    }

  }

  render() {
    return (
      <div>
        <div className="suggest_banner">
          <div>
            <img className="suggest_banner_text" src={require("../../img/banner_text.png")} alt="" />
          </div>
        </div>
        <div className='suggest_list' style={{minHeight: 600, padding: '40px 50px 80px'}}>
          <p className="suggest_line"></p>
          <div className="">
            {
              this.state.suggestDetailData ? this.state.suggestDetailData.map((v, i) => {
                return (
                  <dl className={v.label == 1 ? 'active suggest_detail_dl' : 'suggest_detail_dl'} style={{borderBottom: 'none'}} key={i+''}>
                    <dt>
                      {
                        v.label == 0 ? <img src="./img/user_ico2.png" alt="" /> : <img src="./img/user_ico.png" alt="" />
                      }
                      <span>{v.label == 0 ? v.userName : '客服'}</span>
                    </dt>
                    <dd className={v.label == 1 ? 'active' : ''}>
                      <p className="suggestDetail_detail">{v.detail}</p>
                      <p className="suggestDetail_time">
                        <span>{Util.dateFormat_hms(v.createDate)}</span>
                      </p>
                    </dd>
                  </dl>
                )
              })
              : null
            }
          </div>
          <Input className="suggest_details_replyInput" type="textarea" rows={10} onChange={this.replyDetailChange} value={this.state.replyDetail}/>
          <button className="suggest_details_replyBtn" onClick={this.confirmReplyClick}>回复</button>
        </div>

      </div>
    )
  }
}
